import React, { useState } from 'react';
import { DatePicker } from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN'; 
import dayjs from 'dayjs';

function About() {
  const [birthdate, setBirthdate] = useState('');
  const [daysUntilBirthday, setDaysUntilBirthday] = useState(null);
  const [daysLived, setDaysLived] = useState(null);

  const calculateDaysUntilBirthday = (selectedDate) => {
    const today = new Date();
    const birth = new Date(selectedDate);
    
    const nextBirthday = new Date(
      today.getFullYear(),
      birth.getMonth(),
      birth.getDate()
    );
    
    if (nextBirthday < today) {
      nextBirthday.setFullYear(today.getFullYear() + 1);
    }
    
    const diffTime = nextBirthday - today;
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    
    setDaysUntilBirthday(diffDays);
  };

  const calculateDaysLived = (selectedDate) => {
    const today = new Date();
    const birth = new Date(selectedDate);
    
    const diffTime = today - birth;
    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
    
    setDaysLived(diffDays);
  };

  const handleDateChange = (date) => {
    if (date) {
      const dateString = date.format('YYYY-MM-DD');
      setBirthdate(dateString);
      calculateDaysUntilBirthday(dateString);
      calculateDaysLived(dateString);
    } else {
      setBirthdate('');
      setDaysUntilBirthday(null);
      setDaysLived(null);
    }
  };

  return (
    <div>
      <h1>关于我们</h1>
      <p>这是关于页面</p>
      
      <div style={{ marginTop: '20px' }}>
        <h2>生日倒计时</h2>
        <DatePicker 
          locale={locale}
          value={birthdate ? dayjs(birthdate) : null}
          onChange={handleDateChange}
          placeholder="请选择您的生日"
          style={{ width: 200 }}
        />
        {daysUntilBirthday !== null && (
          <p style={{ marginTop: '10px' }}>距离下次生日还有 {daysUntilBirthday} 天！</p>
        )}
        {daysLived !== null && (
          <p>你已经在这个世界上生活了 {daysLived} 天！</p>
        )}
      </div>
    </div>
  );
}

export default About;